<template>
  <div class="apply-payment">
    <a-spin :spinning="loading">
      <!-- 申请打款 -->
      <div class="apply-content">
        <div class="title">
          <span
            >请款金额: <span class="emphasis-item">{{ selectUnchargeOff }}</span></span
          >
          <div>
            <a-button style="margin-right: 16px" type="primary" v-debounce :loading="loading" @click="allSelectHandle">提交全部费用付款申请</a-button>
            <a-button style="margin-right: 16px" type="primary" v-debounce :loading="loading" @click="submitHandle">提交付款申请</a-button>
            <a-button @click="emit('update:visible', false)">关闭</a-button>
          </div>
        </div>
        <div class="apply-form">
          <label for="#">请款说明:</label>
          <a-textarea v-model:value="submitForm.paymentDescription" placeholder="请输入" show-count :maxlength="100" />
        </div>
        <div style="margin-bottom: 12px" class="title">
          <div>
            请款账单:
            <a-button size="small" style="margin-right: 16px" @click="expandAllEvent">一键展开</a-button>
            <a-button size="small" style="margin-right: 16px" @click="clearExpandEvent">一键收起</a-button>
          </div>
        </div>
        <vxe-table border ref="customerBillRef" show-overflow="title" height="500" :data="applyCostList" :scroll-y="{ enabled: true, gt: 30 }">
          <vxe-column type="expand" width="50" fixed="left">
            <template #content="{ row }">
              <div class="child-table">
                <vxe-table
                  border
                  show-overflow="title"
                  height="200"
                  :data="row.paymentShipmentResList"
                  :row-config="{ keyField: 'id', height: 30 }"
                  :scroll-y="{ enabled: true, gt: 10 }"
                  :expand-config="{ reserve: true }"
                  @checkbox-all="selectAllEvent($event, row)"
                  @checkbox-change="selectChangeEvent($event, row)"
                  :checkbox-config="{checkMethod: ({ row }: any) => [1,2].includes(row.status) }"
                >
                  <vxe-column type="checkbox" width="50" fixed="left"></vxe-column>
                  <vxe-column field="waybillNum" title="运单号" min-width="140" fixed="left"></vxe-column>
                  <vxe-column field="service" title="服务" min-width="140" fixed="left">
                    <template #default="{ row }">
                      <span :class="{ red: !row.serviceDifferent }">{{ row.service }}</span>
                    </template>
                  </vxe-column>

                  <vxe-column field="destination" title="目的地" min-width="90">
                    <template #default="{ row }">
                      <span :class="{ red: !row.destinationDifferent }">{{ row.destination }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column field="settlementWeight" title="结算重" min-width="90">
                    <template #default="{ row }">
                      <span :class="{ red: !row.weightDifferent }">{{ row.settlementWeight }}</span>
                    </template>
                  </vxe-column>

                  <vxe-column field="payableAmount" title="应付金额" min-width="90"></vxe-column>
                  <vxe-column field="payableAmountSum" title="合计应付金额" min-width="70"></vxe-column>
                  <vxe-column field="receivableAmount" title="应收金额" min-width="70"></vxe-column>
                  <vxe-column field="grossProfit" title="毛利润" min-width="70"></vxe-column>
                  <vxe-column field="status" title="核销状态" min-width="70" fixed="right">
                    <template #default="{ row }">
                      <a-tag v-if="row.status === 1" color="#cccc"> 未核销 </a-tag>
                      <a-tag v-if="row.status === 2" color="#2db7f5"> 部分核销 </a-tag>
                      <a-tag v-if="row.status === 3" color="#87d068"> 已核销 </a-tag>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="paymentBillNumber" title="应付账单号" min-width="140" fixed="left"></vxe-column>
          <vxe-column field="payableStatementNumber" title="代理账单号" min-width="140" fixed="left"></vxe-column>
          <vxe-column field="agent" title="代理商" min-width="140" fixed="left"></vxe-column>
          <vxe-column field="payableAmount" title="应付金额" min-width="140" fixed="left"></vxe-column>
          <vxe-column field="surplusPayableAmount" title="剩余应付金额" min-width="90"></vxe-column>
        </vxe-table>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: PaymentApproval.ListRows[];
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
  (e: "update:visible", visible: boolean): void;
}>();
const { visible, passData } = toRefs(props);
const { customerBillRef, init, loading, submitForm, applyCostList, selectMap, selectUnchargeOff } = InitHook({ passData });
const { selectAllEvent, selectChangeEvent, expandAllEvent, clearExpandEvent, submitHandle, allSelectHandle } = OperationHook({
  emit,
  loading,
  submitForm,
  selectMap,
  customerBillRef,
  selectUnchargeOff,
  applyCostList
});
init();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) init();
    else {
      submitForm.paymentDescription = "";
      selectMap.value = {};
    }
  }
);
</script>
<style lang="stylus" scoped>
.apply-payment {
    background-color: #fff;
    padding: 12px;
    height: 100%;
    .base-info-content{
        font-weight: 600;
    }
    .operation-btn{
        padding-bottom: 12px;
        text-align: right;
        :deep(.ant-btn){
            margin-right: 8px;
        }
    }
    .red{
        color: red;
    }
    .emphasis-item {
        color: #fe8100;
        > :deep(.ant-form-item-label){
            >label{
                color: #fe8100;
            }
        }
    }
    .apply-content{
        .title{
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .apply-form{
            font-weight: 600;
            margin-bottom: 12px;
            >label{
                display: inline-block;
                margin-bottom: 12px;
            }
        }
        .tip{
            font-weight: 600;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 12px;
        }
        .table-operation-btn{
          margin-bottom: 12px;
        }
        .child-table{
            padding: 12px;
        }
    }
    .operation-btn{
      position: absolute;
      background-color: #fff;
      bottom: 0;
      left: 0;
      padding: 12px;
      width: 100%;
      font-weight: 600;
      text-align: center;
      z-index: 999;
      box-shadow: 0px 0px 5px #ccc;
    }
}
</style>
